/*
 * @Author: yangrongxin
 * @Date: 2021-08-02 17:53:06
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-17 10:18:21
 */
import { useState, useEffect } from 'react';
import { View, ScrollView, Text, Image, OpenData } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import Taro from '@tarojs/taro';
import { loginWithFn, isLoginFn } from '@/utils/common';
import { getUserIndexData } from './service';
import styles from './index.module.less';

const My = () => {
  const isLogin = isLoginFn(); // 判断当前是不是已经进行了登录

  const [refresherTrigger, setRefresherTrigger] = useState<boolean>(false);
  const [extendObj, setExtendObj] = useState({
    waitSuccessEvaluation: 0,
    userInfo: {
      contactMobile: '',
    },
  });

  const fetchUserData = () => {
    getUserIndexData().then((res: any) => {
      if (res?.userInfo) setExtendObj(res);
      setTimeout(() => {
        setRefresherTrigger(false);
      }, 500);
    });
  };

  useEffect(() => {
    if (isLogin) fetchUserData();
  }, []);

  const {
    waitSuccessEvaluation,
    userInfo: { contactMobile },
  } = extendObj;

  const listData = [
    {
      icon: 'box-fill',
      text: '个人资料',
      url: '/pages/My/compoents/MyData/index',
      color: '#6db0d8',
    },
    {
      icon: 'layergroup-fill',
      text: '我的测评',
      url: `/pages/My/compoents/MyAssessment/index?waitSuccessEvaluation=${waitSuccessEvaluation}`,
      noticeStr: 'waitSuccessEvaluation',
      color: '#866dd8',
    },
    // TODO: 优惠券属于一期不做的功能
    // {
    //   icon: 'Wallet',
    //   text: '优惠券',
    //   url: '3',
    // },
    {
      icon: 'heart-fill',
      text: '我的收藏',
      url: '/pages/My/compoents/MyFavorite/index',
      color: '#d86d6d',
    },
    {
      icon: 'cog-fill',
      text: '设置',
      url: '/pages/My/compoents/MySetting/index',
      color: '#6da6d8',
    },
  ];

  /* 跳转到对应的位置 */
  const toUrl = (url, text) => {
    if (text === '设置') {
      Taro.navigateTo({
        url,
      });
    } else {
      loginWithFn(() => {
        Taro.navigateTo({
          url,
        });
      });
    }
  };

  console.log('extendObj', extendObj);
  return (
    <ScrollView
      scrollWithAnimation
      scrollY
      refresherEnabled={isLogin}
      onRefresherRefresh={() => {
        setRefresherTrigger(true);
        fetchUserData();
      }}
      refresherTriggered={refresherTrigger}
    >
      <View className={styles.wapper}>
        {/* 头部样式 */}
        <View className={styles.header} onClick={loginWithFn}>
          <Image src="https://hxgywx.oss-cn-shenzhen.aliyuncs.com/hxt-wxminiprogram/user_head_bg.png" />
          <View>
            {/* 展示头像 */}
            <View>
              {isLogin ? (
                <OpenData type="userAvatarUrl" />
              ) : (
                <Image src="https://hxgywx.oss-cn-shenzhen.aliyuncs.com/hxt-wxminiprogram/avatar_none.png" />
              )}
            </View>
            {isLogin ? (
              <View>
                <View>
                  <OpenData type="userNickName" />
                </View>
                <Text>{contactMobile}</Text>
              </View>
            ) : (
              <View className={styles.unlogin}>
                <Text>登录/注册</Text>
              </View>
            )}
          </View>
        </View>
        {/* 主要的内容 */}
        <View className={styles.content}>
          {listData.map((item: any) => {
            const { icon, text, url, noticeStr } = item;
            return (
              <View key={url} className={styles.contentItem} onClick={() => toUrl(url, text)}>
                <AtIcon prefixClass="icon" value={icon} color={item.color} size="18" />
                <Text>{text}</Text>
                {noticeStr && extendObj[noticeStr] !== 0 && (
                  <View className={styles.extendIcon}>
                    <Text>{extendObj[noticeStr]}</Text>
                  </View>
                )}
              </View>
            );
          })}
        </View>
      </View>
    </ScrollView>
  );
};

export default My;
